<template>
	<view class="login-container">
		<view class="logo-area">
			<text class="logo-text">家宝</text>
			<text class="slogan">专业家政服务，让生活更轻松</text>
		</view>

		<view class="login-methods">
			<view class="method-icons">
				<view class="icon-item">
					<text class="iconfont icon-phone"></text>
				</view>
				<view class="icon-item">
					<text class="iconfont icon-message"></text>
				</view>
				<view class="icon-item">
					<text class="iconfont icon-global"></text>
				</view>
			</view>

			<view class="divider">
				<text>或使用手机号登录</text>
			</view>

			<view class="input-group">
				<input type="number" class="input-item" placeholder="手机号码" v-model="formData.phone" maxlength="11" />
				<input type="number" class="input-item" placeholder="密码" v-model="formData.password" />
				<view class="verification-code">
					<input type="number" class="input-item" placeholder="验证码" v-model="formData.code" maxlength="6" />
					<button class="code-btn" :disabled="isSending" @click="getVerificationCode">
						{{ codeText }}
					</button>
				</view>
			</view>

			<button class="login-btn" @click="handleLogin">登录</button>

			<!-- 添加注册按钮 -->
			<button class="register-btn" @click="goToRegister">注册新账号</button>

			<!-- 添加服务条款和隐私政策 -->
			<view class="agreement">
				<text class="agreement-text">登录即表示您同意我们的</text>
				<text class="agreement-link" @click="openServiceTerms">服务条款</text>
				<text class="agreement-text">和</text>
				<text class="agreement-link" @click="openPrivacyPolicy">隐私政策</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onUnmounted,
		reactive
	} from 'vue'
	import {
		login
	} from '@/api/login.js'

	// 响应式数据
	const formData = reactive({
		phone: '',
		password: '',
		code: ''
	})
	const isSending = ref(false);
	const codeText = ref('获取验证码');
	let timer = null;

	// 获取验证码
	const getVerificationCode = () => {
		// 手机号验证
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}

		// 发送验证码逻辑
		isSending.value = true;
		let countdown = 60;
		codeText.value = `${countdown}s`;

		timer = setInterval(() => {
			countdown--;
			codeText.value = `${countdown}s`;
			if (countdown <= 0) {
				clearInterval(timer);
				isSending.value = false;
				codeText.value = '获取验证码';
			}
		}, 1000);

		// 这里添加发送验证码的API调用
		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		});
	};

	// 登录处理
	const handleLogin = async () => {
		if (!formData.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}

		if (!formData.code) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			});
			return;
		}

		if (!formData.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return;
		}

		// 这里添加登录API调用
		uni.showLoading({
			title: '登录中...'
		});

		const res = await login(formData)

		uni.hideLoading()

		// 登录成功后跳转到首页
		uni.switchTab({
			url: '/pages/index/index'
		});
	};

	// 跳转到注册页面
	const goToRegister = () => {
		uni.navigateTo({
			url: '/pages/register/index'
		});
	};

	// 打开服务条款
	const openServiceTerms = () => {
		uni.navigateTo({
			url: '/pages/terms/service'
		});
	};

	// 打开隐私政策
	const openPrivacyPolicy = () => {
		uni.navigateTo({
			url: '/pages/terms/privacy'
		});
	};

	// 组件销毁时清除定时器
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	});
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 40rpx;
		min-height: 100vh;
		background-color: #fff;

		.logo-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 80rpx;
			margin-bottom: 100rpx;

			.logo-text {
				font-size: 80rpx;
				font-weight: bold;
				color: #ff7a45;
				margin-bottom: 20rpx;
			}

			.slogan {
				font-size: 32rpx;
				color: #666;
			}
		}

		.login-methods {
			width: 100%;

			.method-icons {
				display: flex;
				justify-content: center;
				margin-bottom: 60rpx;

				.icon-item {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #f5f5f5;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 30rpx;

					.iconfont {
						font-size: 50rpx;
						color: #333;
					}

					&:nth-child(1) .iconfont::before {
						content: "\e6dd"; // 电话图标
					}

					&:nth-child(2) .iconfont::before {
						content: "\e649"; // 消息图标
					}

					&:nth-child(3) .iconfont::before {
						content: "\e6eb"; // 全球图标
					}
				}
			}

			.divider {
				display: flex;
				align-items: center;
				color: #999;
				font-size: 28rpx;
				margin: 40rpx 0;

				&::before,
				&::after {
					content: '';
					flex: 1;
					height: 1px;
					background-color: #eee;
				}

				text {
					padding: 0 20rpx;
				}
			}

			.input-group {
				margin-bottom: 60rpx;

				.input-item {
					height: 100rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					padding: 0 30rpx;
					font-size: 32rpx;
					margin-bottom: 30rpx;
				}


				.verification-code {
					display: flex;
					align-items: center;

					.input-item {
						flex: 1;
						margin-right: 20rpx;
						margin-bottom: 0;
					}

					.code-btn {
						width: 200rpx;
						height: 100rpx;
						line-height: 100rpx;
						background-color: #fff;
						color: #ff7a45;
						border: 1px solid #ff7a45;
						border-radius: 10rpx;
						font-size: 28rpx;
						padding: 0;

						&:disabled {
							color: #999;
							border-color: #ddd;
						}
					}
				}
			}

			.login-btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #ff7a45;
				color: #fff;
				border-radius: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			/* 注册按钮样式 */
			.register-btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #fff;
				color: #ff7a45;
				border: 1px solid #ff7a45;
				border-radius: 10rpx;
				font-size: 36rpx;
				margin-bottom: 40rpx;
			}

			/* 服务条款和隐私政策样式 */
			.agreement {
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 26rpx;
				color: #999;
				margin-top: 20rpx;

				.agreement-text {
					color: #999;
				}

				.agreement-link {
					color: #ff7a45;
					margin: 0 4rpx;
				}
			}
		}
	}
</style>